<template>
  <!-- 业务基本信息显示 -->
  <div class="pb-10">
    <div class="font-weight-bold  pl-20">{{ $t('BASIC_INFO') }}</div>
    <el-divider class="m-0 mt-10 mb-10" />
    <div class="flex flex-wrap  pl-20">
      <div class="flex w-100">
        <div class="w-50 mb-10 flex-1">
          {{ $t('SERVICE_NAME') }}： {{ formData.bizName }}
        </div>
        <div v-if="operateType !== 'open'" class="w-50 mb-10 flex-1">
          {{ $t('SERVICE_STATUS') }}： {{ dictMap.BIZ_STATUS[formData.bizStatus] }}
        </div>
        <div class="w-50 mb-10 flex-1">
          {{ $t('SERVICE_CODE') }}： {{ formData.resourceCode }}
        </div>
      </div>
      <template v-if="operateType === 'open'">
        <div class="w-50 mb-10">
          {{ $t('A_END_STATION_NAME') }}：
          {{ getRegionName(formData.aStationId) }}
        </div>
        <div class="w-50 mb-10">
          {{ $t('Z_END_STATION_NAME') }}：
          {{ getRegionName(formData.zStationId) }}
        </div>
        <div class="w-50 mb-10">
          {{ $t('ANODE') }}： {{ formData.aNodeData.nodeName }}
        </div>
        <div class="w-50 mb-10">
          {{ $t('ZNODE') }}： {{ formData.zNodeData.nodeName }}
        </div>
        <template v-if="!formData.bizId">
          <div class="w-50 mb-10">
            {{ $t('A_END_NODE_PORT') }}： {{ formData.aPortData.bizName }}
          </div>
          <div class="w-50 mb-10">
            {{ $t('Z_END_NODE_PORT') }}： {{ formData.zPortData.bizName }}
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    props: {
      formData: {
        type: Object,
        default: () => {}
      },
      operateType: {
        type: String,
        default: 'view'
      }
    },
    computed: {
      ...mapGetters(['baseRegionList', 'dictMap'])
    },
    methods: {
      // 获取区域/站点/机房
      getRegionName(stationId) {
        const stationData = this.baseRegionList.find(
          i => i.regionId === stationId
        )
        return stationData ? stationData.regionName : ''
      }
    }
  }
</script>

<style></style>
